﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - 后台管理</title>
    <link rel="stylesheet" href="~/css/main.css" />
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css">
    @RenderSection("Style", required: false)
    <style>
        .el-main {
            margin-top: 20px !important;
        }

        .el-header {
            background-color: black;
            color: white;
            align-items: center !important;
            justify-content:center !important;
            height: 45px !important;
            display:flex;
            font-weight:bold;
        }

        #changeAccount, #logout {
            text-decoration: underline;
            color: white;
            font-size: 14px;
        }

         #changeAccount:hover {
            color: yellow;
        }
    </style>
</head>
<body>
    @Html.AntiForgeryToken()
    <div id="el-dialog" style="height:0px;visibility:hidden;">
        <el-dialog title="账号修改" :visible="dialogVisible" :width="dialogwidth" style="font-weight:bold" @@close='dialogVisible = false'>
            <el-form ref="form" :model="form" label-width="90px">
            <el-form-item label="昵称">
                    <el-input maxlength="20" v-model.trim="form.nickName"></el-input>
            </el-form-item>
            <el-form-item label="当前密码">
                    <el-input maxlength="20" v-model.trim="form.oldPassward" show-password></el-input>
            </el-form-item>
                <el-form-item label="新密码">
                    <el-input maxlength="20" v-model.trim="form.newPassward" show-password></el-input>
                </el-form-item>
                <el-form-item label="新密码确认">
                    <el-input maxlength="20" v-model.trim="form.newPasswardConfirm" show-password></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" style="display:flex;justify-content:center;margin-top:20px;">
                <el-button type="primary" @@click="changeAccount" style="width:110px;">确 定</el-button>
                <el-button @@click="dialogVisible = false" style="width:110px;">取 消</el-button>
            </div>
        </el-dialog>
    </div>
    <div id="app">
        <el-container>
            <el-header>
                <div style="width: 100%;background-color: transparent;text-align: left;z-index: 11;margin-left:18px;font-size:18px;">             
                    <i class="el-icon-s-platform" style="margin-right:4px;"></i>后台管理
                </div>
                <div  style="margin-right:90px;position: absolute;width: 100%;background-color: transparent;text-align: right;z-index: 12;">
                    欢迎： <a id="changeAccount" href="#" title="点击修改账号">@ViewData["nickname"]</a>
                    <a id="logout" href="#" title="点击退出账号" style="margin-left:20px;">[退出]</a>
                 </div>
             </el-header>
            <el-container>
                <el-aside width="220px">
                    <el-menu :default-active="defaultMenuActive"
                             class="el-menu-vertical-demo"
                             background-color="#545c64"
                             text-color="#fff"
                             active-text-color="#ffd04b"
                             style="height:100%;">
                        <el-menu-item index="1" style="padding-left:40px;margin-top:10px;" id="petInfo">
                            <i class="el-icon-document"></i>
                            <span slot="title" style="font-size:16px;">宠物信息</span>
                        </el-menu-item>
                        <el-menu-item index="2" style="padding-left:40px;" id="petFosterage">
                            <i class="el-icon-s-home"></i>
                            <span slot="title" style="font-size:16px;">宠物寄养</span>
                        </el-menu-item>
                        <el-menu-item index="3" style="padding-left:40px;" id="petBeauty">
                            <i class="el-icon-setting"></i>
                            <span slot="title" style="font-size:16px;">宠物美容</span>
                        </el-menu-item>
                        <el-menu-item index="4" style="padding-left:40px;" id="contactUS">
                            <i class="el-icon-user"></i>
                            <span slot="title" style="font-size:16px;">联系方式</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    @RenderBody()
                 </el-main>
            </el-container>
        </el-container>
    </div>
    <script src="~/js/jquery3.6.0.js"></script>
    <script src="~/js/vue2.6.14.js"></script>
    <script src="~/js/eu-index2.15.7.js"></script>
    <script src="~/js/axios1.5.0.min.js"></script>
    <script src="~/js/jscookie3.0.1.min.js"></script>
    <script src="~/js/myvue.js"></script>
    <script type="text/javascript">

        //文档加载完毕再执行操作，防止vue导致jquery绑定事件无效
        $(document).ready(function () {

            $('#changeAccount').click(function () {
                appLayout.dialogVisible = true;
                $('#el-dialog').css('visibility', 'visible');
                return false;
            });

            $('#logout').click(async function () {

                axios.defaults.headers.common['RequestVerificationToken'] = $("[name='__RequestVerificationToken']").val();
                await axios.post('../../Admin/AdminHome/Logout', {
                }).then(response => {
                    if (response.data != 'ok') {
                        this.$message.error(response.data);
                    }
                    else {
                        window.location.reload();
                    }
                }, error => {
                    alert("错误提示：" + error.message);
                });

                return false;
            });

            $('#petInfo').click(function () {
                location.href = '../../Admin/AdminHome/Index';
                return false;
            });

            $('#petFosterage').click(function () {
                location.href = '../../Admin/AdminHome/PetFosterage';
                return false;
            });

            $('#petBeauty').click(function () {
                location.href = '../../Admin/AdminHome/PetBeauty';
                return false;
            });

            $('#contactUS').click(function () {
                location.href = '../../Admin/AdminHome/ContactUS';
                return false;
            });

        });

        //添加请求拦截器，在发送请求之前做某件事
        axios.interceptors.request.use(config => {
            return config;
        }, error => {
            return Promise.reject(error)
        });

        var appLayout = new Vue({
            el: "#el-dialog",
            mounted: function () {
            },
            methods: {
                async changeAccount() {
                    if (appLayout.form.nickName === '' || appLayout.form.nickName === null) {
                        this.$message.error('昵称不能为空');
                        return;
                    }

                    if (appLayout.form.oldPassward === '' || appLayout.form.oldPassward === null) {
                        this.$message.error('当前密码不能为空');
                        return;
                    }

                    if (appLayout.form.newPassward != '' ) {
                        if (appLayout.form.newPasswardConfirm === '' || appLayout.form.newPasswardConfirm === null) {
                            this.$message.error('请进行新密码确认');
                            return;
                        }

                        if (appLayout.form.newPassward != appLayout.form.newPasswardConfirm) {
                            this.$message.error('新密码两次输入不一致');
                            return;
                        }

                        var regex = new RegExp("(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{9,20}");
                        if (!regex.test(appLayout.form.newPassward)) {
                            this.$message.error("新密码必须同时包含字母、数字和特殊字符且至少9位");
                            return;
                        }
                    }

                     axios.defaults.headers.common['RequestVerificationToken'] = $("[name='__RequestVerificationToken']").val();
                     await axios.post('../../Admin/AdminHome/ChangeAccount', {
                                "nickName": appLayout.form.nickName,
                                "oldPassward": appLayout.form.oldPassward,
                                "newPassward": appLayout.form.newPassward,
                            }).then(response => {
                                    if (response.data != 'ok') {
                                        this.$message.error(response.data);
                                    }
                                    else {
                                        location.href = '../../Admin/AdminHome/Index';
                                    }
                                }, error => {
                                    alert("错误提示：" + error.message);
                                });
                 },
            },
            data() {
                return {
                    dialogVisible:false,
                    dialogwidth:'420px',
                    form: {
                        nickName: '@Html.Raw(ViewData["nickname"])',
                        oldPassward: '',
                        newPassward:'',
                        newPasswardConfirm:''
                    }
                }
            }
        });
    </script>
    @RenderSection("Scripts", required: false)
</body>
</html>
